<template>
	<view class="coupon-item" :class="{ 'used': isUsed, 'expired': isExpired }" @click="handleCouponClick">
		<view class="coupon-left">
			<view class="discount">
				<text class="number">{{ couponData.discount }}</text>
				<text class="unit">折</text>
			</view>
		</view>
		<view class="coupon-right">
			<text class="coupon-name">{{ couponData.name }}</text>
			<text class="validity">有效期至：</text>
			<uni-dateformat class="validity-date" format="yyyy/MM/dd" :date="couponData.validity"></uni-dateformat>

			<!-- <uni-button size="mini" type="warning" class="get-btn">立即领取</uni-button> -->
		</view>
		<view class="qr-wrapper">
			<image class="custom-image" :src="couponData.customImage" mode="aspectFit" />
		</view>
		<view class="coupon-decorator"></view>

		<!-- 添加二维码弹窗 -->
		<view v-if="showQRCode" class="qr-code-container">
			<view class="mask" @click.stop="closeQRCode"></view>
			<view class="qr-code-content">
				<view class="close-btn" @click.stop="closeQRCode">×</view>
				<text class="qr-title">优惠券二维码</text>
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrCodeValue" :options="options" />
				<text class="qr-tip">长按识别二维码</text>
			</view>
		</view>
	</view>
</template>

<script>
import { store } from '@/uni_modules/uni-id-pages/common/store.js'
export default {
	name: 'coupon-item',
	props: {
		couponData: {
			type: Object,
			required: true
		},
		enableShare: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			showQRCode: false,
			options: {
				width: 200,
				height: 200,
				colorDark: "#000000",
				colorLight: "#ffffff",
				correctLevel: 3
			}
		}
	},
	computed: {
		qrCodeValue() {
			const id = this.couponData._id || '';
			// 这里的优惠券所属商家的ID
			const merchant_id = this.couponData.user_id || ''; // 优惠券所属商家的ID
			console.log('this.couponData', this.couponData);
			return JSON.stringify({ id, user_id: this.userId, merchant_id });
		},
		userId() {
			return store.userInfo._id
		},
		isExpired() {
			if (!this.couponData.validity) return false;
			const now = new Date();
			const validityDate = new Date(this.couponData.validity);
			return validityDate < now;
		},
		isUsed() {
			return this.couponData.status === 1;
		}
	},
	methods: {
		handleGet() {
			this.$emit('get', this.couponData)
		},

		/**
		 * 分享内容到不同平台
		 * @param {Object} options - 分享选项
		 * @param {string} options.coupon_id - 优惠券ID
		 * @param {string} options.title - 分享标题
		 * @param {string} options.content - 分享内容
		 * @param {string} options.imageUrl - 分享图片URL
		 * @param {string} options.url - 分享链接URL
		 */
		shareContent(options) {
			const { title, content, imageUrl, url } = options;

			// #ifdef MP-WEIXIN
			uni.showActionSheet({
				itemList: ['分享到微信好友', '分享到微信群'],
				success: (res) => {
					if (res.tapIndex === 0 || res.tapIndex === 1) {
						uni.showModal({
							title: '分享提示',
							content: '点击右上角"..."按钮，选择"转发"即可分享到微信好友或群聊',
							showCancel: false
						});
					}
				},
				fail: (err) => {
					console.error('分享操作失败', err);
					uni.showToast({
						title: '分享操作失败',
						icon: 'none'
					});
				}
			});
			// #endif

			// #ifdef H5
			uni.showModal({
				title: '分享提示',
				content: 'H5环境暂不支持直接分享到微信，请在微信小程序中使用此功能',
				showCancel: false
			});
			// #endif

			// #ifdef APP-PLUS
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession', // WXSceneSession：分享到微信好友，WXSceneTimeline：分享到微信朋友圈
				type: 5, // 0:图文，1:纯文字，2:纯图片，3:音乐，4:视频，5:小程序
				title: title,
				summary: content,
				imageUrl: imageUrl,
				href: url,
				success: (res) => {
					console.log('分享成功', res);
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('分享失败', err);
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			});
			// #endif
		},
		handleCouponClick() {
			if (this.showQRCode) return;
			if (this.couponData.status === 1) {
				uni.showToast({
					title: '优惠券已核销',
					icon: 'none'
				});
				return;
			}
			if (this.isExpired) {
				uni.showToast({
					title: '优惠券已过期',
					icon: 'none'
				});
				return;
			}
			console.log('优惠券被点击：', this.couponData);
			const coupon = this.couponData;

			if (this.enableShare) {
				// 如果是商户，触发分享功能
				// 准备分享内容
				const couponId = coupon.id || '';
				const shareTitle = coupon.name || '优惠券分享';
				const shareContent = `${coupon.discount}折优惠券，有效期至：${coupon.validity}`;
				const shareImageUrl = coupon.customImage || '/static/logo.png';
				// 修改分享链接指向优惠券中心页面
				const shareUrl = `/pages/coupon/center?id=${couponId}`;

				// 调用分享功能
				this.shareContent({
					couponId,
					title: shareTitle,
					content: shareContent,
					imageUrl: shareImageUrl,
					url: shareUrl
				});
			} else {
				// 如果是用户
				// 显示二维码弹窗
				this.showQRCode = true;
			}
		},
		closeQRCode() {
			this.showQRCode = false;
		}
	}
}
</script>

<style>
.coupon-item {
	background: #FFFFFF;
	/* 移除整体圆角 */
	border-radius: 0;
	/* margin-bottom: 30rpx; */
	display: flex;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	/* 调整整体高度 */
	height: 180rpx;
}

.coupon-left {
	background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
	width: 180rpx;
	/* 调整宽度 */
	padding: 20rpx;
	/* 减小内边距 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	position: relative;
	flex-shrink: 0;
}

.number {
	font-size: 36px;
	/* 调整折扣数字大小 */
	font-weight: bold;
}

.unit {
	font-size: 16px;
	/* 调整单位大小 */
	margin-left: 4rpx;
}

.coupon-right {
	flex: 1;
	padding: 20rpx;
	/* 减小内边距 */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.coupon-name {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

.validity,
.validity-date {
	font-size: 24rpx;
	color: #999999;
	margin: 4rpx 0;
}

.get-btn {
	margin-top: 10rpx;
	height: 50rpx !important;
	line-height: 50rpx !important;
}

/* 调整装饰器位置 */
.coupon-decorator {
	position: absolute;
	left: 160rpx;
	/* 调整分隔线位置 */
	top: 0;
	bottom: 0;
	width: 20rpx;
	overflow: hidden;
}

/* 调整二维码区域 */
.qr-wrapper {
	padding: 10rpx 20rpx;
	display: flex;
	align-items: center;
}

.custom-image {
	width: 120rpx;
	/* 调整二维码大小 */
	height: 120rpx;
	border-radius: 8rpx;
}

/* 添加二维码弹窗样式 */
.qr-code-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
}

.qr-code-content {
	position: relative;
	width: 85%;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 50rpx 30rpx;
	z-index: 1000;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.close-btn {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	font-size: 44rpx;
	color: #6c757d;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.qr-title {
	font-size: 36rpx;
	font-weight: 600;
	margin-bottom: 40rpx;
	color: #2c3e50;
}

.qr-tip {
	font-size: 24rpx;
	color: #666;
	margin-top: 20rpx;
}

/* 添加过期状态样式 */
.coupon-item.expired {
	position: relative;
	opacity: 0.7;
}

.coupon-item.expired::after {
	content: '已过期';
	position: absolute;
	right: -60rpx;
	top: 20rpx;
	width: 260rpx;
	height: 60rpx;
	background: rgba(255, 107, 107, 0.25);
	color: rgba(255, 107, 107, 0.9);
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	line-height: 60rpx;
	transform: rotate(45deg);
	transform-origin: center;
	pointer-events: none;
	z-index: 1;
}

/* 过期状态下的左侧背景色调整 */
.coupon-item.expired .coupon-left {
	background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
	opacity: 0.7;
}

/* 添加已核销水印样式 */
.coupon-item.used {
	position: relative;
	opacity: 0.8;
	/* 整体透明度降低 */
}

.coupon-item.used::after {
	content: '已核销';
	position: absolute;
	right: -60rpx;
	top: 20rpx;
	width: 260rpx;
	height: 60rpx;
	background: rgba(153, 153, 153, 0.25);
	color: rgba(153, 153, 153, 0.9);
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	line-height: 60rpx;
	transform: rotate(45deg);
	transform-origin: center;
	pointer-events: none;
	z-index: 2;
	/* 提高z-index确保覆盖过期状态 */
}

/* 已核销状态下的左侧背景色调整 */
.coupon-item.used .coupon-left {
	background: linear-gradient(135deg, #999999 0%, #666666 100%);
}
</style>